<template>
  <div class="OrderBuy">
    <Back title="订单结算">
    </Back>
    <div class="OrderBuy-box">
      <div class="addselect" >
          <div class="add-text" @click="showAddress" >选择地址</div>
          <van-icon name="arrow" />
      </div>
      <div class="adddata">
      <div class="user">
        <div class="user-name">{{selectAddress.name}}</div>
        <div class="user-phone">{{selectAddress.tel}}</div>
        <div v-if="selectAddress.isDefault"><van-tag round type="primary" color="#EE0A24" text-color="#fff">默认</van-tag></div>
      </div>
          <div class="user-add">{{selectAddress.address}}</div>
        
      </div>
      <div class="form-msg">
        <div class="msg-text">订单信息</div>
        <div class="pro">
           <div class="order-item" v-for="(item, index) in initShowProData" :key="index">
            <OrderProItem :product="item" />
          </div>

          <div class="show-more" v-if="!isShowMore">
            <span @click="showMoreProduct">显示更多商品<van-icon name="arrow-down" /></span>
          </div>

        </div>
        <div class="time" >{{time}}</div>
        <div class="sum">
         <div class="sum-num">共计{{this.orderProData.length}}件</div>
         <div class="sum-price">合计 ￥{{prototal}}</div>
        </div>
      </div>
    </div>
    <div class="pay-btn">
        <van-button block round color="#0C34BA"  @click="pay">立即结算</van-button>
      </div>
       <van-popup v-model="show" position="bottom" closeable>
      <div class="popup-box">
        <div class="popup-title">选择地址</div>
        <div class="list-box">
          <van-address-list
            v-model="chosenAddressId"
            :list="addressList"
            default-tag-text="默认"
            @add="addAddress"
            @select="select"
          />
        </div>
      </div>
    </van-popup>
    <div class="pwd-ipt" :class="{show: showBoard}">
        <div class="pwd-title">输入支付密码</div>
        <div class="cancel" @click="cancel">
          <van-icon name="cross" />
        </div>
        <div class="input-box">
          <van-password-input :value="userPassword" :focused="showKeyboard" />
        </div>
          <van-number-keyboard
            v-model="userPassword"
            extra-key="."
            :show="showKeyboard"
            @input="inputPassword"
          />
      </div>
  </div>
</template>

<script>
import Back from '../components/Back.vue'
import OrderProItem from '../components/OrderProItem.vue'

export default {
   name: "OrderBuy",

  data() {
    return {
      show: false,
      chosenAddressId: '',

      //地址数据
      addressList: [],

      //选择地址
      selectAddress: {},

      //订单商品数据
      orderProData: [],

      //初始显示的3条商品数据
      initCount: 3,
      initShowProData: [],

      //是否显示更多商品数据
      isShowMore: false,

       //用户输入的密码
      userPassword: "",

      //预设密码
      passowrd: '520000',

      //是否显示数字键盘
      showKeyboard: true,

      //弹出键盘
      showBoard: false,

      //商品总数量
      count: 0,

      //订单总金额
      total: 0
    };
  },

  components: {
    Back,
    OrderProItem,
  },

  created() {
    this.sids = JSON.stringify(this.$route.query.sids.split('-'));

    //获取地址数据
    this.getAdressData();

    this.getBuyProduct();
    
   
  },

  methods: {
    //显示选择地址弹窗
    showAddress() {
      this.show = true;
    },

    //获取地址数据
    getAdressData() {
      this.axios({
        method: 'get',
        url: '/findAddress'
      }).then(res=> {

        if (res.data.code === 700) {
          return this.$router.push({name: 'Login'});
        }

        if (res.data.code === 20000) {
          res.data.result.forEach(v => {
            v.address = `${v.province}${v.city}${v.county}${v.addressDetail}`;
            v.isDefault = Boolean(v.isDefault);

            //查找默认地址
            if (v.isDefault) {
              this.selectAddress = v;
              this.chosenAddressId = v.id;
            }
          })

          this.addressList = res.data.result;
        }

        // 
        // 

      }).catch(err=> {
              })
    },

    //跳转新增地址页面
    addAddress() {
      this.$router.push({name: 'Address'});
    },

    //选择地址
    select(item) {
            this.chosenAddressId = item.id;
       
       this.selectAddress = item;

       this.show = false;
    },

    //获取购买商品的数据
    getBuyProduct() {
      this.axios({
        method: 'get',
        url: '/commitShopcart',
        params: {
          sids: this.sids
        }
      }).then(res=> {
                if (res.data.code === 700) {
          return this.$router.push({name: 'Login'});
        }

        if (res.data.code === 50000) {
          this.orderProData = res.data.result;
           
           
          this.initShowProData.push(...this.orderProData.slice(0, this.initCount));

          if (this.orderProData.length <= 3) {
            this.isShowMore = true;
          }
        }

      }).catch(err=> {
              })
    },

    //显示更多商品
    showMoreProduct() {
      this.initShowProData.push(...this.orderProData.slice(this.initCount));
      this.isShowMore = true;
    },
   
    //匹配密码
    inputPassword(key) {
      //       // 
      let pwd = this.userPassword + key;
      // 
      if (pwd.length === 6) {
        this.showBoard = false;

        //模拟密码验证
        this.$toast.loading({
          message: '正在支付中...',
          forbidClick: true,
          duration: 0
        })

        setTimeout(() => {
          this.$toast.clear();

          //判断密码是否一致
          if (pwd === this.passowrd) {
            //发起结算订单请求
            

            //获取参数
            let data = {
              sids: this.sids,
              phone: this.selectAddress.tel,
              address: this.selectAddress.address,
              receiver: this.selectAddress.name
            };

            
            this.axios({
              method: 'post',
              url: '/pay',
              data
            }).then(res => {
                            if (res.data.code === 700) {
                return this.$router.push({ name: "Login" });
              }

              this.$toast(res.data.msg);

              if (res.data.code === 60000) {
                setTimeout(() => {
                  //跳转到指定页面
                  this.$router.push({name: 'Order'});
                }, 2000)
                
              }
            }).catch(err => {
                          })


          } else {
            this.userPassword = '';
            this.$toast('结算失败，密码错误');
          }
         
        }, 3000)

      }
    },

    //结算时弹出密码输入框
    pay() {
      this.showBoard = true;
    },

    //取消
    cancel() {
      this.showBoard = false;
    }
  },
  computed:{
     prototal() {
        let total = 0;
        this.orderProData.forEach(v => {
       
          total += v.price * v.count;
          
        })

        return total ;
        
      },
      time(){
         // 当前时间
   
        //获取当前时间并打印
        let time = 100;
       
    　　let yy = new Date().getFullYear();
    　　let mm = new Date().getMonth()+1;
    　　let dd = new Date().getDate();
    　　let hh = new Date().getHours();
    　　let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    　　let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    　　time = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
       return time ; 
    }
      
  }
}
</script>

<style lang="less" scoped>
.OrderBuy-box{
  margin: 0 20px;
}
.addselect{
  display: flex;
  color: #999;
  font-size: 15px;
  padding: 20px 0;
}
/deep/.van-icon-arrow{
margin: 3px 6px; 
}
.user{
  display: flex;
  flex-wrap: wrap;
}
.adddata{
  font-size: 13px;
}
.user-phone{
 color: #777;
 padding: 0 20px;
  
}
.user-name{
  color: #2B52C4 ;
}
.user-add{
 margin-top: 15px;
 color: #999;
}
.msg-text{
 margin-top: 30px;
 color: #555;
 font-size: 13px;

}
.time{
 margin: 30px 0 15px 0;
 color: #888;
}
.sum{
  display: flex;
  justify-content: space-between;
 color: #666;

}
.sum-price{
  font-size: 13px;
  font-weight: bold;
  color: #2B52C4;
}
.van-button{
  margin-top: 40px;

}
/deep/.van-tag--round { 
  width: 30px;
  height: 18px;;
}
.pwd-title{
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  color: #444;
  background-color: #fff;
  position: relative;
}

.cancel{
  width: 22px;
  height: 22px;
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 20px;
  color: #666;
}
.pwd-ipt{
  position: fixed;
  bottom: -354px;
  left: 0;
  right: 0;
  transition: bottom .3s linear;
}

.pwd-ipt.show{
  bottom: 0;
}

/deep/ .van-number-keyboard{
  position: static;
}


</style>